<template>
  <div class="newfriend-header">
    <div class="contact-name no-drag">新的朋友</div>
  </div>
  <LayoutContentPanel :show-top-border="true">
    <template #content>
      <div
        class="newfriend-container"
        v-infinite-scroll="getUserApplyList"
        infinite-scroll-delay="500"
        :infinite-scroll-immediate="false"
      >
        <div
          class="newfriend-item"
          v-for="item in newFriendList"
          :key="item.id"
        >
          <!-- 申请内容 -->
          <div class="apply-info">
            <!-- 头像 -->
            <div class="avatar">
              <img
                :src="item.avatar"
                style="width: 50px; height: 50px"
                alt=""
              />
            </div>

            <div class="apply-content">
              <div class="apply-nickname">{{ item.nickname }}</div>
              <div class="apply-description">
                {{ item.applyInfo }}
              </div>
            </div>
          </div>
          <!-- 申请状态 -->
          <div class="apply-status">
            <div v-if="item.status !== 0">已添加</div>
            <div v-else>
              <div class="agree-btn" @click="agreeApply(item.id)">
                <span>接受</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </LayoutContentPanel>
</template>

<script setup lang="ts">
import LayoutContentPanel from "../layout/LayoutContentPanel.vue";
import { ref } from "vue";
import { dealWithApply, listContactApply } from "@/api/contact";

const newFriendList = ref<any>([]);

const pindex = ref<number>(1);
const psize = ref<number>(10);
const total = ref<number>(0);
const id = ref<number>(0);

const getUserApplyList = async () => {
  const result: any = await listContactApply({
    pindex: pindex.value,
    psize: psize.value,
    keyword: "",
    id: id.value,
  });

  if (!result) {
    return;
  }

  const list = result.data.list;
  if (list && list.length > 0) {
    pindex.value = result.data.value;
    psize.value = result.data.psize;
    total.value = result.data.total;
    // 有获取到数据，则直接使用最后一个记录的id
    id.value = list.length > 0 ? list[list.length - 1].id : id.value;

    newFriendList.value = newFriendList.value.concat(list);
  }
};

const agreeApply = async (applyId: number) => {
  await dealWithApply({
    applyId,
  });

  id.value = 0;
  newFriendList.value = [];
  await getUserApplyList();
};

getUserApplyList();
</script>

<style scoped lang="scss">
.newfriend-header {
  height: 60px;
  padding: 0px 0 12px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;

  .contact-name {
    text-align: center;
    font-size: 18px;
  }
}
.newfriend-container {
  width: 100%;
  height: 100%;
  padding: 0px 90px;

  .newfriend-item {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #a2a2a2;

    &:not(:last-child) {
      border-bottom: 1px solid #e7e7e7;
    }

    .apply-info {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar {
        margin-right: 10px;
      }

      .apply-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: start;
        padding: 5px;

        .apply-nickname {
          width: 100%;
          color: #383838;
        }

        .apply-description {
          width: 100%;
          margin-top: 10px;
          margin-left: 5px;
        }
      }
    }

    .apply-status {
      display: flex;
      align-items: center;
      justify-content: center;

      .agree-btn {
        width: 45px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #1aad19;
        color: #fff;

        &:hover {
          cursor: pointer;
          background-color: #129611;
        }
      }
    }
  }
}
</style>
